<template>
  <div>
    <div class="cell-storage-form">
      <!-- 筛选条件 -->
      <div class="filter-bar">
        <div class="filter-item">
          <label>入库日期</label>
          <input type="date" v-model="filters.startDate" /> 至
          <input type="date" v-model="filters.endDate" />
        </div>

        <div class="filter-item">
            <label>细胞类型</label>
        <select v-model="filters.cellType">
          <option v-for="type in cellTypes" :key="type.value" :value="type.value">
            {{ type.label }}
          </option>
        </select>
        </div>

        <div class="filter-item">
          <label>冰柜名称</label>
          <select v-model="filters.freezer">
            <option v-for="item in freezers" :key="item.value" :value="item.value">
              {{ item.label }}
            </option>
          </select>
        </div>
      </div>
    </div>
    <table class="storage-table">
      <thead>
        <tr>
          <th>细胞名称</th>
          <th>细胞类型</th>
          <th>采样人</th>
          <th>入库时间</th>
          <th>更新时间</th>
          <th>存储位置</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in sampleList" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.celltypeName }}</td>
          <td>{{ item.userName }}</td>
          <td>{{ formatDate(item.entry_time) }}</td>
          <td>{{ formatDate(item.update_time) }}</td>
          <td>{{ item.cell }}</td>
          <td>
            <button @click="handleEdit(item)">编辑</button>
          </td>
        </tr>
      </tbody>
    </table>
      <!-- 分页 -->
    <div class="pagination">
       <span>每页显示：</span>
      <select v-model="pagination.pageSize" @change="handleSizeChange">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
      </select>
      <button @click="handleCurrentChange(pagination.currentPage - 1)" :disabled="pagination.currentPage === 1">上一页</button>
      <span>当前页：{{ pagination.currentPage }}</span>
      <button @click="handleCurrentChange(pagination.currentPage + 1)">下一页</button>
      <span>共 {{ pagination.total }} 条记录</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      sampleList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 2
      },
      filters: {
        startDate: '',
        endDate: ''

      }
    }
  },

  mounted () {
    this.getSampleList()
  },
  methods: {
    getSampleList () {
      axios.get('http://localhost:8000/api/samples/').then(response => {
        console.log(response.data)
        this.sampleList = response.data
      })
        .catch(error => {
          console.log(error)
        })
    },
    formatDate (dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString() // You can format this as needed
    },
    handleEdit (item) {
      console.log('编辑行:', item)
      // 这里添加编辑逻辑
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      if (val < 1 || val > Math.ceil(this.pagination.total / this.pagination.pageSize)) {
        return
      }
      this.pagination.currentPage = val
      this.loadData()
    },
    loadData () {
      // 这里添加加载数据的逻辑
      console.log('加载数据，参数:', {
        filters: this.filters,
        pagination: this.pagination
      })
    }
  }

}

</script>

<style lang="scss" scoped>
.cell-storage-form {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%)
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 24px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

.filter-item label {
  min-width: 70px;
  font-weight: 500;
  white-space: nowrap;
}

.filter-item select,
.filter-item input[type="date"] {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 140px;
}

.filter-item input[type="date"] {
  width: auto;
}

/* 入库汇总 */
.summary-section {
  margin: 24px 0;
  padding: 16px 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.summary-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.summary-filter label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.summary-filter input[type="month"],
.summary-filter input[type="text"] {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 140px;
}

/* 表格 */
.storage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.storage-table thead {
  background-color: #f1f3f5;
}

.storage-table th,
.storage-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
  white-space: nowrap;
}

.storage-table tbody tr:hover {
  background-color: #f8f9fa;
}

/* 操作按钮 */
.storage-table button {
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.storage-table button:hover {
  background-color: #0056b3;
}

/* 分页 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.pagination select {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.pagination button {
  padding: 6px 12px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

.pagination button:disabled {
  background-color: #adb5bd;
  cursor: not-allowed;
}

.pagination button:hover:not(:disabled) {
  background-color: #0056b3;
}

  </style>
